<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-22 14:00:42
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback hasbtn title="这里是详情标题">
    <b-button :param="handlerParam" @handler="handler"></b-button>
    <uni-popup @change="changePicker" ref="detailPicker" mask-background-color="rgba(0,0,0,0.6)">
      <view class="detail">
        <view class="detail-inner">
          <view class="detail-title">{{ detail.title }}</view>
          <view class="detail-part">
            <view class="part-label">时间</view>
            <view class="part-txt">{{ detail.time }}</view>
          </view>
          <view class="detail-part">
            <view class="part-label">出行方式</view>
            <view class="part-txt">{{ detail.time }}</view>
          </view>
          <view class="detail-part">
            <view class="part-label">车牌号</view>
            <view class="part-txt">{{ detail.code }}</view>
          </view>
          <view class="detail-part">
            <view class="part-label">费用</view>
            <view class="part-txt">{{ detail.cost }}</view>
          </view>
          <view v-if="detail.person && detail.person.length > 0" class="detail-part">
            <view class="part-label">成员</view>
            <view class="part-txt">
              <view class="person-list">{{ personConvert(detail.person) }}</view>
              <view class="person-total">共{{ detail.person.length }}人</view>
            </view>
          </view>
        </view>
        <view class="handler">
          <view @click="todo(v.key)" class="single"
            :style="{ background: v.bgcolor, color: v.color, borderColor: v.bdcolor }" v-for="(v, i) in button" :key="i">
            {{
              v.title }}</view>
        </view>
      </view>
    </uni-popup>
    <view class="form">
      <z-paging ref="paging" v-model="list" @query="queryList">
        <view slot="top">
          <view class="info">
            <view class="info-txt">
              <view class="title">
                <view class="title-txt">昆明一周游</view>
                <view class="title-detail">7天 共50人</view>
              </view>
              <view class="dec">美丽多彩的春城！</view>
            </view>
            <image class="edit" mode="aspectFit" src="../../static/img/icon/edit.png">
            </image>
          </view>
          <view class="option" :class="{ 'bd': list.length > 0 }">
            <view @click="linkTo(v.path)" class="single" v-for="v in option" :key="v.id">
              <image class="icon" mode="aspectFit" :src="`../../static/img/icon/detail-icon-${v.id + 1}.png`">
              </image>
              <view class="txt">{{ v.title }}</view>
            </view>
          </view>
        </view>
        <view class="inner-list">
          <view class="single-route" v-for="(v, i) in list" :key="v.id">
            <view class="dateline">
              <view class="date">第{{ i + 1 }}天</view>
              <view class="date-convert">{{ datelineCovert(v.date).day }} {{ datelineCovert(v.date).week }}</view>
            </view>
            <view class="content">
              <view class="notes">
                <view class="notes-part" v-for="a in v.content" :key="a.id">
                  <image @click.stop="changeNote(a)" class="notes-icon" mode="aspectFit"
                    src="../../static/img/icon/note-icon.png"></image>
                  <view v-show="a.isExpand" class="txt">{{ a.title }}</view>
                </view>
              </view>
              <view class="route" :class="{ 'hasContent': v.route.length > 0 }">
                <view @click.stop="toDetail(a)" class="route-part" v-for="a in v.route" :key="a.id">
                  <image class="type" mode="aspectFit" :src="currentType(a.type).path"></image>
                  <view class="route-detail" :class="a.type">
                    <view v-if="a.type == 'traffic'">
                      <view class="txt">{{ a.title }} {{ a.code }}</view>
                      <view class="txt">共{{ a.person.length }}人 ￥{{ a.price }}</view>
                    </view>
                    <view v-if="a.type == 'place'">
                      <image class="pic" mode="aspectFit" :src="a.imgpath"></image>
                      <view class="detail-inner">
                        <view class="txt">{{ a.title }}</view>
                        <view class="txt">共{{ a.person.length }}人 ￥{{ a.price }}</view>
                      </view>
                    </view>
                    <view v-if="['food', 'hotel'].includes(a.type)">
                      <view class="txt">{{ a.title }}</view>
                    </view>
                  </view>
                </view>
                <view v-if="v.route.length > 0" class="limit-line"></view>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </l-page>
</template>

<script>
import bButton from "@/components/button/button";
export default {
  name: "detail",
  components: { bButton },
  data() {
    return {
      handlerParam: {
        position: "fixed",
        type: "multiple",
        list: [
          {
            title: "编辑",
            value: 0,
            color: "#6ABE83",
            border: "4rpx solid #6ABE83",
            bgcolor: "#E8FFEF",
          },
          {
            title: "发布",
            value: 1,
            bgcolor: "#6ABE83",
            color: "#ffffff",
          },
        ],
      },
      screen: {
        limit: "",
        page: "",
      },
      option: [{ id: 0, title: '备注' },
      { id: 1, title: '交通', path: '/pages/trip/traffic' },
      { id: 2, title: '餐饮' },
      { id: 3, title: '酒店' },
      { id: 4, title: '景点' }],
      list: [{
        id: 0, date: '2024-01-09', content: [
          { id: 0, title: '去鸡鸣古寺、秦淮河、夫子庙', isExpand: false },
          { id: 1, title: '10:00去鸡鸣古寺、秦淮河、夫子庙', isExpand: false }
        ], route: [
          { id: 0, type: 'traffic', title: '大巴', code: '沪A 888888', person: ['成员1', '成员2'], price: 120 },
          { id: 1, type: 'food', title: '特色团餐' },
          { id: 2, type: 'place', title: '鸡鸣古寺', imgpath: '', person: ['成员1', '成员2'], price: 120 },
          { id: 3, type: 'place', title: '秦淮河', imgpath: '', person: ['成员1', '成员2'], price: 120 },
          { id: 4, type: 'food', title: '当地餐厅' },
          { id: 5, type: 'hotel', title: 'XXX酒店' },
        ]
      },
      { id: 1, date: '2024-01-10', content: [], route: [] }],
      button: [{ title: '取消', bgcolor: '#E8FFEF', color: '#6ABE83', bdcolor: '#6ABE83', key: 'cancel' },
      { title: '编辑', bgcolor: '#6ABE83', color: '#ffffff', key: 'confirm' }],
      detail: {}
    };
  },
  computed: {
    currentType() {
      return this.$store.getters.getRouteTypeByKey;
    },
    personConvert() {
      return (v) => {
        return v.join('、');
      }
    }
  },
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    queryList(pageNo, pageSize) {
      this.screen.page = pageNo;
      this.screen.limit = pageSize;
      this.getList();
    },
    getList() {
      this.$refs.paging.complete(this.list);
    },
    changeNote(v) {
      v.isExpand = !v.isExpand;
    },
    toDetail(v) {
      this.detail = v;
      this.$refs.detailPicker.open("bottom");
    },
    changePicker(v) {
      if (v.show == false) this.detail = {};
    },
    todo(v) {
      if (v == 'cancel') {
        this.detail = {};
        this.$refs.detailPicker.close();
      } else {

      }
    },
    handler(v) { },
    linkTo(path) {
      path && this.$util.linkTo(path);
    },
    datelineCovert(dateString) {
      const date = new Date(dateString);
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const week = weekDays[date.getDay()];
      return { day: `${month}.${day}`, week };
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.detail {
  position: fixed;
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  border-radius: 40upx;

  .detail-inner {
    padding: 40upx 50upx;
    width: 100%;
    height: calc(100% - 100upx);

    .detail-title {
      margin-bottom: 20upx;
      font-size: 36upx;
      font-weight: bold;
      color: #333333;
      line-height: 36upx;
      text-align: center
    }

    .detail-part {
      .flex(row, space-between, flex-start);
      padding: 10upx 0;

      .part-label {
        width: 140upx;
        font-size: 32upx;
        color: #666666;
        line-height: 60upx;
      }

      .part-txt {
        width: calc(100% - 140upx);
        font-size: 32upx;
        font-weight: bold;
        color: #333333;
        line-height: 60upx;
        text-align: right;
      }

      .person-total {
        color: #6ABE83;
      }
    }
  }

  .handler {
    .flex();
    padding: 0 36upx;

    .single {
      .flex(row, center);
      width: 330upx;
      height: 100upx;
      border-radius: 50upx;
      border-width: 2upx;
      border-style: solid;
      font-size: 36upx;
      line-height: 36upx;
      letter-spacing: 18upx;
      text-indent: 18upx;
    }
  }
}

.form {
  border-top: 1upx solid #F5F5F5;
  background-color: #ffffff;

  .bd::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 34upx;
    right: 34upx;
    height: 2upx;
    background-color: #F5F5F5;
  }

  .info {
    .flex();
    border-bottom: 1upx solid #F5F5F5;
    padding: 30upx 14upx 30upx 6upx;
    margin: 0 auto;
    width: calc(100% - 68upx);

    .info-txt {
      width: calc(100% - 36upx);
      color: #333333;

      .title {
        .flex(row, flex-start, baseline);
        line-height: 36upx;

        .title-txt {
          font-size: 32upx;
          font-weight: bold;
        }

        .title-detail {
          margin-left: 14upx;
          font-size: 20upx;
        }
      }

      .dec {
        margin-top: 4upx;
        font-size: 28upx;
        line-height: 36upx;
      }
    }

    .edit {
      width: 36upx;
      height: 36upx;
    }
  }

  .option {
    position: relative;
    .flex();
    padding: 30upx 54upx;

    .single {
      .flex(column, center);
    }

    .icon {
      width: 70upx;
      height: 70upx;
    }

    .txt {
      font-size: 24upx;
      color: #333333;
      line-height: 45upx;
    }
  }

  .inner-list {
    padding: 30upx 40upx 30upx 20upx;

    .single-route {
      .dateline {
        .flex(row, flex-start);
        padding-left: 172upx;

        .date {
          font-size: 32upx;
          font-weight: bold;
          color: #333333;
          line-height: 36upx;
        }

        .date-convert {
          margin-left: 12upx;
          font-size: 24upx;
          color: #333333;
          line-height: 36upx;
        }
      }

      .content {
        .flex(row, flex-start, flex-start);
        width: 100%;
        min-height: 210upx;

        .notes {
          padding-right: 20upx;
          width: 210upx;

          .notes-part {
            .flex(column, center);
            margin-top: 44upx;

            .notes-icon {
              width: 48upx;
              height: 48upx;
            }

            .txt {
              padding: 6upx 20upx;
              margin-top: 26upx;
              background: #F5F5F5;
              border-radius: 8upx;
              font-size: 20upx;
              color: #333333;
              line-height: 46upx;
              text-align: center;
            }
          }
        }

        .route {
          position: relative;
          width: calc(100% - 210upx);
          min-height: 210upx;

          &.hasContent {
            padding: 210upx 0 138upx 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 4upx;
            background-color: #E8FFEF;
          }

          .limit-line {
            position: relative;
            margin-top: 44upx;
            border: 2upx solid #6B88EA;

            &::before,
            &::after {
              content: "";
              position: absolute;
              background-color: #6B88EA;
            }

            &::before {
              top: -7upx;
              left: -32upx;
              width: 4upx;
              height: 14upx;
              border-radius: 2upx;
            }

            &::after {
              top: -1upx;
              left: -30upx;
              width: 30upx;
              height: 4upx;
            }
          }

          .route-part {
            .flex(row, flex-start);

            &:not(:last-child) {
              margin-bottom: 22upx;
            }

            .type {
              margin: 0 20upx 0 24upx;
              width: 48upx;
              height: 48upx;
            }

            .route-detail {
              width: calc(100% - 92upx);

              &:not(.place) {
                padding: 10upx 20upx;
                background: #F5F5F5;
                border-radius: 8upx;
              }

              &.place>view {
                .flex(row, flex-start);
              }

              .pic {
                width: 140upx;
                height: 140upx;
                border-radius: 20upx;
                background: #F5F5F5;
              }

              .detail-inner {
                padding: 20upx;
                margin-left: 10upx;
                width: calc(100% - 150upx);
                height: 140upx;
                background: #F5F5F5;
                border-radius: 8upx;
              }

              .txt {
                font-size: 28upx;
                color: #333333;
                line-height: 36upx;
              }
            }
          }
        }
      }
    }
  }
}
</style>